<template>
    <div id="subPage">
        <div class="left">
            <div class="item left_one">
                <div class="left_one_top">
                    <div class="left_one_top_icon">
                        <img src="../../assets/images/ags/equip/equipment.png" />
                    </div>
                    <div class="left_one_top_title">在场设备</div>
                </div>
                <div class="left_one_bottom">
                    <div class="left_one_bottom_chart">
                        <div id="present_device"></div>
                    </div>
                    <div class="left_one_bottom_list">
                        <vue-seamless-scroll ref="enterDeviceList" :data="enterDeviceList" :class-option="defaultOption">
                            <ul>
                                <li v-for="(item, index) in enterDeviceList" :key="index">
                                    <em v-bind:style="{background: colorList[index]}"></em>
                                    <span style="width:0.6rem">{{item.name}}</span>
                                    <span style="width:0.45rem">({{ item.value }}台)</span>
                                    <span>{{ item.rate }}</span>
                                </li>
                            </ul>
                        </vue-seamless-scroll>
                    </div>
                </div>
            </div>
            <div class="item left_two">
                <div class="left_two_top">
                    <div class="left_two_top_icon">
                        <img src="../../assets/images/ags/equip/timely.png" />
                    </div>
                    <div class="left_two_top_title">实时状态</div>
                </div>
                <div class="left_two_bottom">
                    <div class="tabs">
                        <div :class="['tab', realDataSwitch === 1 ? 'active' : '']" @click="realDataSwitch = 1">全部</div>
                        <div :class="['tab', realDataSwitch === 2 ? 'active' : '']" @click="realDataSwitch = 2">工作</div>
                        <div :class="['tab', realDataSwitch === 3 ? 'active' : '']" @click="realDataSwitch = 3">怠机</div>
                        <div :class="['tab', realDataSwitch === 4 ? 'active' : '']" @click="realDataSwitch = 4">停机</div>
                        <div :class="['tab', realDataSwitch === 5 ? 'active' : '']" @click="realDataSwitch = 5">离线</div>
                    </div>
                    <div class="echarts">
                        <div class="echartsBox">
                            <div class="canvas-center-box">
                                <div class="num">{{ realStatusNum }}</div>
                                <div class="text">总设备/台</div>
                            </div>
                            <div id="real-time-status"></div>
                        </div>
                        <div class="echartsBox_list">
                            <vue-seamless-scroll style="width: 100%;overflow:hidden;max-height: 80px" ref="seamlessScroll" :data="realStatusList" :class-option="defaultOption">
                                <ul>
                                    <li v-for="(item, index) in realStatusList" :key="index">
                                        <em v-bind:style="{background: colorList[index]}"></em>
                                        <span style="width:0.6rem">{{item.name}}</span>
                                        <span style="width:0.45rem">({{ item.value }}台)</span>
                                        <span>{{ item.rate }}</span>
                                    </li>
                                </ul>
                            </vue-seamless-scroll>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item left_three">
                <div class="left_three_top">
                    <div class="left_three_top_icon">
                        <img src="../../assets/images/ags/equip/warn.png" />
                    </div>
                    <div class="left_three_top_title">预警统计</div>
                    <div class="left_three_top_count">
                        <span>总预警次数</span>
                        <span>{{ warnNum }}</span>
                        <span>次</span>
                    </div>
                </div>
                <div class="left_three_bottom">
                    <vue-seamless-scroll ref="warnSlide" :data="warnList" :class-option="defaultOption" style="overflow:hidden;height:85%">
                        <ul id="warnSlide1">
                            <li v-for="(item, index) in warnList" :key="index">
                                <em v-bind:style="{ background: item.color }"></em>
                                <span class="name">{{ item.name }}</span>
                                <span class="num">{{ item.num }}次</span>
                            </li>
                        </ul>
                    </vue-seamless-scroll>
                </div>
            </div>
        </div>
        <div class="center">
            <div class="center-top">
                <div class="line-animatedgradient"></div>
                <div class="tag-list">
                    <div :class="['tag', mapDataSwitch === 1 ? 'active' : '']" @click="mapDataSwitch = 1">实时</div>
                    <div :class="['tag', mapDataSwitch === 2 ? 'active' : '']" @click="mapDataSwitch = 2">轨迹</div>
                </div>
                <div class="img">
                    <div id="map"></div>
                </div>
                <div class="time" v-if="!imgFlag"></div>
                <div class="list" v-if="!imgFlag">
                    <div class="play">
                        <img src="./../../assets/images/ags/equip/start.png" alt v-if="playFlag" @click="start" />
                        <img src="./../../assets/images/ags/equip/pause.png" alt v-if="!playFlag" @click="pause" />
                    </div>
                    <div class="slider">
                        <div class="item" style="width:95%; margin:0 auto;display:flex;flex-direction:column;align-items:flex-start">
                            <DatePicker
                                type="date"
                                :options="options"
                                placeholder="请选择日期"
                                style="width: 2rem;margin-top:0.05rem;"
                                format="yyyy-MM-dd"
                                v-model="day"
                                :clearable="false"
                                @on-change="getData"
                                size="small"
                            ></DatePicker>
                            <el-slider
                                v-model="slider"
                                style="margin-top:-0.10rem;width:100%"
                                :format-tooltip="timestepToolTip"
                                :step="step"
                                :max="max"
                                @change="getSecond"
                            ></el-slider>
                        </div>
                        <div class="tip" style="margin-top:-0.05rem;">
                            <div class="p1">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                            <div class="p2"></div>
                            <div class="p3">
                                <span>0:00</span>
                                <span>3:00</span>
                                <span style="margin-left:10px">6:00</span>
                                <span style="margin-left:10px">9:00</span>
                                <span style="margin-left:3px">12:00</span>
                                <span style="margin-left:10px">15:00</span>
                                <span style="margin-left:10px">18:00</span>
                                <span style="margin-left:10px">21:00</span>
                                <span>24:00</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="bottom_top">
                    <div class="bottom_top_icon">
                        <img src="../../assets/images/ags/equip/status.png" />
                    </div>
                    <div class="bottom_top_title">实时状态</div>
                </div>
                <div class="bottom_table">
                    <div class="t-header">
                        <div class="td" style="width:13%">时间</div>
                        <div class="td" style="width:15%">编号</div>
                        <div class="td" style="width:7%">类型</div>
                        <div class="td">操作手</div>
                        <div class="td" style="width:9%">实时油量</div>
                        <div class="td" style="width:5%">状态</div>
                        <div class="td" style="width:20%">持续时长</div>
                        <div class="td">今日开机时长</div>
                    </div>
                    <div class="t-body">
                        <vue-seamless-scroll style="width: 100%;overflow:hidden;height: 90%" ref="seamlessScroll" :data="realTimeStatusList" :class-option="defaultOption">
                            <div class="tr" v-for="item in realTimeStatusList" :key="item.id">
                                <div class="td" style="width:30%">{{ item.time || "-" }}</div>
                                <div class="td" style="width:25%">{{ item.machCode || "-" }}</div>
                                <div class="td" style="width:10%">{{ item.machTypeName || "-" }}</div>
                                <div class="td">{{ item.operEmpName || "-" }}</div>
                                <div class="td" style="width:10%">
                                    <span>{{item.remainOilPercent || "-"}}</span>
                                    <span v-if="item.remainOilPercent">%</span>
                                </div>
                                <div class="td" style="width:5%">
                                    <span v-if="item.workState == 1" style="color:#D17272">停机</span>
                                    <span v-if="item.workState == 2" style="color:#D1A572">怠机</span>
                                    <span v-if="item.workState == 3" style="color:#5AD8A6">工作</span>
                                    <span v-if="item.workState == 0" style="color:#95C3DE">离线</span>
                                </div>
                                <div class="td" style="width:20%">{{ item.duration || "-" }}</div>
                                <div class="td">{{ item.totalTimes || 0 }}h</div>
                            </div>
                        </vue-seamless-scroll>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="item right_one">
                <div class="right_one_top">
                    <div class="right_one_top_icon">
                        <img src="../../assets/images/ags/equip/device_data.png" />
                    </div>
                    <div class="right_one_top_title">设备数据</div>
                </div>
                <div class="right_one_bottom">
                    <div class="tabs">
                        <div :class="['tab', deviceDataTypeSwitch === 1 ? 'active' : '']" @click="deviceDataTypeSwitch = 1">工作效率</div>
                        <div :class="['tab', deviceDataTypeSwitch === 2 ? 'active' : '']" @click="deviceDataTypeSwitch = 2">油耗量</div>
                        <div :class="['tab', deviceDataTypeSwitch === 3 ? 'active' : '']" @click="deviceDataTypeSwitch = 3">开工率</div>
                        <div :class="['tab', deviceDataTypeSwitch === 4 ? 'active' : '']" @click="deviceDataTypeSwitch = 4">工作时长</div>
                    </div>
                    <div class="tabs_right">
                        <div :class="[deviceDataTimeSwitch == 1 ? 'active' : '', 'tabs_right1']" @click="deviceDataTimeSwitch = 1">近7天</div>
                        <div :class="[deviceDataTimeSwitch == 2 ? 'active' : '', 'tabs_right2']" @click="deviceDataTimeSwitch = 2">近30天</div>
                    </div>
                    <div class="echarts">
                        <div id="device_data"></div>
                    </div>
                </div>
            </div>
            <div class="item right_two">
                <div class="right_two_top">
                    <div class="right_two_top_icon">
                        <img src="../../assets/images/ags/equip/device_monitor.png" />
                    </div>
                    <div class="right_two_top_title">设备监测</div>
                </div>
                <div class="right_two_bottom">
                    <div class="right_two_tab">
                        <div class="name">
                            <Dropdown @on-click="getDeviceTypeFn">
                                <a href="javascript:void(0)" class="text">{{ deviceTypeName }}<Icon type="ios-arrow-down"></Icon></a>
                                <DropdownMenu slot="list">
                                    <DropdownItem :selected="item.id === deviceType" :name="item.id" v-for="item in deviceTypeList" :key="item.id" >{{ item.name }}</DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </div>
                        <div class="type">
                            <Dropdown @on-click="getDeviceIdFn">
                                <a href="javascript:void(0)" class="text">
                                    {{ deviceName }}
                                    <Icon type="ios-arrow-down" v-show="deviceList.length > 0"></Icon>
                                </a>
                                <DropdownMenu slot="list">
                                    <DropdownItem :selected="item.id === deviceId" :name="item.id" v-for="item in deviceList" :key="item.id" >{{ item.code }}</DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </div>
                    </div>
                    <div class="right_two_center">
                        <img v-show="deviceType === 'crane'" src="../../assets/images/ags/equip/device-crane.png" />
                        <img v-show="deviceType === 'lift'" src="../../assets/images/ags/equip/device-lift.png" />
                        <div class="right_list">
                            <div class="right_list_one">
                                <span>开机时间：{{deviceDetail.realTimeData ? deviceDetail.realTimeData.time : ""}}</span>
                            </div>
                            <div class="right_list_one" style="margin-top: 1%">
                                <span>设备名称：{{deviceDetail.deviceInfo ? deviceDetail.deviceInfo.code : ""}}</span>
                            </div>
                            <div class="right_list_one" style="margin-top: 1%">
                                <span>塔吊状态：{{deviceDetail.deviceInfo ? deviceDetail.deviceInfo.netState === 1 ? "在线" : "离线" : ""}}</span>
                            </div>
                            <div class="right_list_one" style="margin-top: 1%">
                                <span>司机姓名：{{deviceDetail.deviceInfo ? deviceDetail.deviceInfo.operatorStr : ""}}</span>
                            </div>
                            <!-- <div><span>违章次数：0</span></div> -->
                            <div class="right_list_one" style="margin-top: 1%">
                                <span>报警次数：{{deviceDetail.warnData ? deviceDetail.warnData.num : ""}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="right_two_datail">
                        <div class="right_two_panel">
                            <div class="right_two_item">
                                <div class="right_two_title">
                                    <img src="../../assets/images/ags/equip/manipulator.png" />
                                    <span>起重臂长：</span>
                                    <span style="color:#00F0FF">{{deviceDetail.realTimeData ? deviceDetail.realTimeData.foreArmLength : 0}}m</span>
                                </div>
                                <div class="right_two_date">
                                    <img src="../../assets/images/ags/equip/manipulator.png" />
                                    <span >平衡臂长：</span>
                                    <span style="color:#00F0FF">{{deviceDetail.realTimeData ? deviceDetail.realTimeData.rearArmLength : 0}}m</span>
                                </div>
                            </div>
                            <div class="right_two_item">
                                <div class="right_two_title">
                                    <img src="../../assets/images/ags/equip/hook_height.png" />
                                    <span>吊钩高度：</span>
                                    <span style="color:#00F0FF">{{deviceDetail.realTimeData ? deviceDetail.realTimeData.height : 0}}m</span>
                                </div>
                                <div class="right_two_date">
                                    <img src="../../assets/images/ags/equip/hook_lift.png" />
                                    <span>吊钩吊重：</span>
                                    <span style="color:#00F0FF">{{deviceDetail.realTimeData ? deviceDetail.realTimeData.weight : 0}}t</span>
                                </div>
                            </div>
                            <div class="right_two_item">
                                <div class="right_two_title">
                                    <img src="../../assets/images/ags/equip/trolley.png" />
                                    <span>小车幅度：</span>
                                    <span style="color:#00F0FF">{{deviceDetail.realTimeData ? deviceDetail.realTimeData.range : 0}}m</span>
                                </div>
                                <div class="right_two_date">
                                    <img src="../../assets/images/ags/equip/angle.png" />
                                    <span>回转角度：</span>
                                    <span style="color:#00F0FF">{{deviceDetail.realTimeData ? deviceDetail.realTimeData.turnAngle : 0}}°</span>
                                </div>
                            </div>
                            <div class="right_two_item">
                                <div class="right_two_title">
                                    <img src="../../assets/images/ags/equip/wind_speed.png" />
                                    <span>风速：</span>
                                    <span style="color:#00F0FF">{{deviceDetail.realTimeData ? deviceDetail.realTimeData.windSpeed : 0 }}m/s</span>
                                </div>
                                <div class="right_two_date">
                                    <img src="../../assets/images/ags/equip/tilt.png" />
                                    <span>倾斜角度：</span>
                                    <span style="color:#00F0FF">{{deviceDetail.realTimeData ? deviceDetail.realTimeData.dipAngle : 0}}°</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { closest, formatSeconds, timeStamp } from "@/sever/utils";
import { format, formatDate, addWeeks, addMonths } from "@/sever/dateutil";
import vueSeamlessScroll from "vue-seamless-scroll";
import {
    getBoardDevicedata,
    getBoardDevicesdatalist,
    getCraneDateLatest,
    getCraneDetails,
    getCraneList,
    getFseRecordList,
    getLiftDateLatest,
    getLiftDetails,
    getLiftList
} from "@/api/api";
import { toPercent } from "@/sever/config";
import { initColors } from "@/mixins/colorObj";
import { getMachAllGpsList, getMachMapList_V1 } from "@/api/mach";
const { Echarts } = require("@/sever/Echarts");
export default {
    name: "equip",
    mixins: [initColors],
    components: { vueSeamlessScroll },
    data() {
        return {
            activeTabs: 1,
            deviceDataName: "",
            dateList: ["10-01", "10-02", "10-03", "10-04", "10-05"],
            deviceDataList: "",
            //组织机构id
            deptId: "",
            //地图数据切换 1-实时 2-轨迹
            mapDataSwitch: 1,
            //实时数据数据切换
            realDataSwitch: 1,
            //设备数据日均数据切换时间 1-近7日 2-近30日
            deviceDataTimeSwitch: 1,
            //设备数据日均数据切换类型
            deviceDataTypeSwitch: 1,
            //在场设备数据列表
            enterDeviceList: [],
            //在场设备统计数量
            enterDeviceNum: 0,
            classOption: {
                step: 0.5
            },
            //地图设备数组
            mapList: [],
            //报警总数
            warnNum: 0,
            //预警统计数据列表
            warnList: [
                {
                    name: "出区域预警数",
                    num: 0,
                    color: "#E7BCF3",
                    code: "fenceWarnNum"
                },
                {
                    name: "怠机预警数",
                    num: 0,
                    color: "#8bc34a",
                    code: "idleWarnNum"
                },
                {
                    name: "工作预警数",
                    num: 0,
                    color: "#FFA080",
                    code: "workWarnNum"
                },
                {
                    name: "停机预警数",
                    num: 0,
                    color: "#FFDC5C",
                    code: "stopWarnNum"
                },
                {
                    name: "超速预警数",
                    num: 0,
                    color: "#A0E6B8",
                    code: "speedWarnNum"
                },
                {
                    name: "发动机预警数",
                    num: 0,
                    color: "#29b6f6",
                    code: "engineWarnNum"
                },
                {
                    name: "拆卸硬件预警数",
                    num: 0,
                    color: "#b3e5fc",
                    code: "deviceWarnNum"
                },
                {
                    name: "倾斜预警数",
                    num: 0,
                    color: "#82b1ff",
                    code: "rotationWarnNum"
                }
            ],
            realTimeStatusList: [],
            //时间
            dateArr: [addWeeks(new Date(), -1), new Date()],
            deviceDataTime: [addWeeks(new Date(), -1), new Date()],
            //设备数据
            deviceDataList: [],
            deviceDataAllList: [],
            //日期
            dateList: [],
            //标题
            deviceDataName: "",
            //实时数据
            realStatusNum: 0,
            realStatusList: [],
            realStatusMsgList: [],

            //地图数据
            day: format(),
            allGpsList: [],
            markList: [],
            mapFlag: true,
            slider: 0,
            imgFlag: true,
            id: "",
            times: "00:00:00",
            list: [],
            time1: null,
            step: 30,
            max: 86400,
            playFlag: true,
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },

            //设备类型
            deviceTypeList: [
                {
                    id: "crane",
                    name: "塔吊"
                },
                {
                    id: "lift",
                    name: "升降机"
                }
            ],
            //设备类型
            deviceType: "crane",
            deviceTypeName: "塔吊",
            //设备类型
            deviceList: [],
            //设备id
            deviceId: "",
            deviceName: "",
            //设备信息
            deviceDetail: {}
        };
    },
    watch: {
        //地图数据切换-数据监听
        mapDataSwitch(newValue, oldValue) {
            if (newValue === 1) {
                this.imgFlag = true;
                this.pause();
                this.getAllList();
            } else {
                this.slider = 0;
                this.imgFlag = false;
                this.day = format();
                this.getMapList();
            }
        },
        //设备指数数据切换-数据监听
        realDataSwitch(newValue, oldValue) {
            this.realStatusNum = 0;
            this.realStatusList = [];
            this.realStatusMsgList = [];
            if (newValue === 1) {
                this.realStatusNum = this.enterDeviceNum;
                this.realStatusList = [
                    {
                        value: this.boardMachNumDTO.workNum,
                        rate: this.realStatusNum === 0 ? "0%" : toPercent(this.boardMachNumDTO.workNum / this.realStatusNum),
                        name: "工作",
                        itemStyle: {
                            normal: {
                                color: this.colorList[0]
                            }
                        }
                    },
                    {
                        rate: this.realStatusNum === 0 ? "0%" : toPercent(this.boardMachNumDTO.idleNum / this.realStatusNum),
                        value: this.boardMachNumDTO.idleNum,
                        name: "怠机",
                        itemStyle: {
                            normal: {
                                color: this.colorList[1]
                            }
                        }
                    },
                    {
                        rate: this.realStatusNum === 0 ? "0%" : toPercent(this.boardMachNumDTO.stopNum / this.realStatusNum),
                        value: this.boardMachNumDTO.stopNum,
                        name: "停机",
                        itemStyle: {
                            normal: {
                                color: this.colorList[2]
                            }
                        }
                    },
                    {
                        rate: this.realStatusNum === 0 ? "0%" : toPercent(this.boardMachNumDTO.offlineNum / this.realStatusNum),
                        value: this.boardMachNumDTO.offlineNum,
                        name: "离线",
                        itemStyle: {
                            normal: {
                                color: this.colorList[3]
                            }
                        }
                    }
                ];
            } else {
                for (let i = 0; i < this.boardMachNumDTO.appMachTypeNumList.length; i++) {
                    if (newValue === 2) {
                        this.realStatusNum += this.boardMachNumDTO.appMachTypeNumList[i].workNum;
                        let obj = {
                            value: this.boardMachNumDTO.appMachTypeNumList[i].workNum,
                            name: this.boardMachNumDTO.appMachTypeNumList[i].machTypeName,
                            itemStyle: {
                                normal: {
                                    color: this.colorList[i]
                                }
                            }
                        };
                        this.realStatusList.push(obj);
                    } else if (newValue === 3) {
                        this.realStatusNum += this.boardMachNumDTO.appMachTypeNumList[i].idleNum;
                        let obj = {
                            value: this.boardMachNumDTO.appMachTypeNumList[i].idleNum,
                            name: this.boardMachNumDTO.appMachTypeNumList[i].machTypeName,
                            itemStyle: {
                                normal: {
                                    color: this.colorList[i]
                                }
                            }
                        };
                        this.realStatusList.push(obj);
                    } else if (newValue === 4) {
                        this.realStatusNum += this.boardMachNumDTO.appMachTypeNumList[i].stopNum;
                        let obj = {
                            value: this.boardMachNumDTO.appMachTypeNumList[i].stopNum,
                            name: this.boardMachNumDTO.appMachTypeNumList[i].machTypeName,
                            itemStyle: {
                                normal: {
                                    color: this.colorList[i]
                                }
                            }
                        };
                        this.realStatusList.push(obj);
                    } else if (newValue === 5) {
                        this.realStatusNum += this.boardMachNumDTO.appMachTypeNumList[i].offlineNum;
                        let obj = {
                            value: this.boardMachNumDTO.appMachTypeNumList[i].offlineNum,
                            name: this.boardMachNumDTO.appMachTypeNumList[i].machTypeName,
                            itemStyle: {
                                normal: {
                                    color: this.colorList[i]
                                }
                            }
                        };
                        this.realStatusList.push(obj);
                    }
                }
            }
            this.realStatusList.forEach(i => {
                let obj = {
                    num: i.value,
                    name: i.name,
                    rate: this.realStatusNum === 0 ? "0%" : toPercent(i.value / this.realStatusNum),
                    color: i.itemStyle.normal.color
                };
                this.realStatusMsgList.push(obj);
            });
        },
        //设备数据日均数据切换时间-数据监听
        deviceDataTimeSwitch(newValue, oldValue) {
            if (newValue == 1) {
                this.deviceDataTime[0] = addWeeks(new Date(), -1);
            } else if (newValue == 2) {
                this.deviceDataTime[0] = addMonths(new Date(), -1);
            }
            this.getDeviceData();
        },
        //设备数据日均数据切换类型-数据监听
        deviceDataTypeSwitch(newValue, oldValue) {
            this.deviceDataList = [];
            this.dateList = [];
            this.deviceDataAllList.forEach(i => {
                this.dateList.unshift(i.date.substring(5, i.date.length));
                if (newValue == 1) {
                    this.deviceDataList.unshift(i.efficExp);
                    this.deviceDataName = "工作效率";
                } else if (newValue == 2) {
                    this.deviceDataList.unshift(i.oilWear);
                    this.deviceDataName = "油耗量";
                } else if (newValue == 3) {
                    this.deviceDataList.unshift(i.operatingRate);
                    this.deviceDataName = "开工率";
                } else if (newValue == 4) {
                    this.deviceDataList.unshift(i.workTimes);
                    this.deviceDataName = "工作时长";
                }
            });
            this.drawDeviceData();
        },
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.getRadarDate();
            }
        }
    },
    methods: {
        drawEnterDevice() {
            let leftChart = document.getElementById("present_device");
            let leftMyChart = this.$echarts.init(leftChart);
            let option;
            option = {
                title: {
                    text: this.enterDeviceNum,
                    left: "center", //对齐方式居中
                    top: "42%", //距离顶部
                    textStyle: {
                        //文字配置
                        color: "#FFFFFF", //文字颜色
                        fontSize: "0.2rem", //字号
                        fontFamily: "led regular",
                        align: "center" //对齐方式
                    }
                },
                tooltip: {
                    trigger: "item",
                    confine: true
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true }
                    }
                },
                color: [
                    "#3DB393",
                    "#FF727B",
                    "#438AFF",
                    "#00F5FF",
                    "#458B00",
                    "#9370DB",
                    "#7A67EE"
                ],
                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: ["25%", "86%"],
                        center: ["51%", "52%"],
                        roseType: "area",
                        itemStyle: {
                            borderRadius: 1
                        },
                        data: this.enterDeviceList,
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        }
                    }
                ]
            };
            option && leftMyChart.setOption(option);
            window.addEventListener("resize", function() {
                leftMyChart.resize();
            });
        },
        drawRealTimeStatus() {
            let realTimeStatus = document.getElementById("real-time-status");
            let msg = {
                color: [
                    "#3DB393",
                    "#FF727B",
                    "#438AFF",
                    "#00F5FF",
                    "#458B00",
                    "#9370DB",
                    "#7A67EE"
                ],
                name: "",
                radius: ["50%", "70%"],
                roseType: false,
                legend: true,
                areaStyle: "",
                labelPosition: "inner",
                formatter: null,
                center: ["50%", "50%"],
                xName: "",
                type: "pie",
                backgroundColor: "#032953",
                graphicFlag: true,
                centerLabel: "",
                graphic: null,
                lineLabelFlag: false
            };
            let data = {
                dom: realTimeStatus,
                title: "",
                legend: false,
                seriesData: this.realStatusList,
                xData: ""
            };
            Echarts.init(msg, data);
        },
        drawDeviceData() {
            let chartDeviceData = document.getElementById("device_data");
            let myChart = this.$echarts.init(chartDeviceData);
            let option;
            option = {
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: this.dateList,
                    axisLine: {
                        show: true //去除轴线
                    },
                    axisLabel: {
                        fontSize: 12,
                        fontFamily: "Microsoft YaHei-Regular, Microsoft YaHei",
                        fontWeight: 400,
                        color: "#C6E9FC"
                    }
                },
                tooltip: {
                    trigger: "axis"
                },
                yAxis: {
                    type: "value",
                    axisLine: {
                        show: true //去除轴线
                    },
                    axisLabel: {
                        fontSize: 12,
                        fontFamily: "Microsoft YaHei-Regular, Microsoft YaHei",
                        fontWeight: 400,
                        color: "#C6E9FC"
                    },
                    splitLine: {
                        //分割线
                        lineStyle: {
                            color: "#112131",
                            type: "dashed"
                        }
                    }
                },
                grid: {
                    left: "2%",
                    right: "8%",
                    bottom: "5%",
                    top: "10%",
                    height: "90%",
                    containLabel: true
                },
                series: [
                    {
                        data: this.deviceDataList,
                        type: "line",
                        areaStyle: {
                            opacity: 0.5,
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "#15AFAF" // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(0,0,0,0)" // 100% 处的颜色
                                    }
                                ],
                                global: false // 缺省为 false
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: "#44E1F8", //折点颜色
                                borderColor: "#44E1F8",
                                borderWidth: 5,
                                lineStyle: {
                                    color: "#15AFAF" //折现颜色
                                }
                            }
                        }
                    }
                ]
            };
            option && myChart.setOption(option);
            window.addEventListener("resize", function() {
                myChart.resize();
            });
        },
        //获取设备类型
        getDeviceTypeFn(deviceType) {
            this.deviceType = deviceType;
            for (let i = 0; i < this.deviceTypeList.length; i++) {
                if (this.deviceTypeList[i].id === deviceType) {
                    this.deviceTypeName = this.deviceTypeList[i].name;
                    break;
                }
            }
            if (this.deviceType === "crane") {
                this.getCraneListFn();
            } else {
                this.getLiftListFn();
            }
        },
        //获取设备id
        getDeviceIdFn(deviceId) {
            this.deviceId = deviceId;
            for (let i = 0; i < this.deviceList.length; i++) {
                if (this.deviceList[i].id === deviceId) {
                    this.deviceName = this.deviceList[i].code;
                    break;
                }
            }
            this.getDeviceDetailFn();
        },
        //获取塔吊设备
        getCraneListFn() {
            let params = {
                deptId: this.deptId,
                bindFlag: 1
            };
            getCraneList(params).then(res => {
                if (res.code == 200) {
                    let list = res.data.list;
                    this.deviceList = this.initData(list);
                    if (this.deviceList.length == 0) {
                        this.deviceId = "";
                        this.deviceName = "";
                    } else {
                        this.deviceId = this.deviceList[0].craneId;
                        this.deviceName = this.deviceList[0].code;
                        this.getDeviceDetailFn();
                    }
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        //获取升降机设备
        getLiftListFn() {
            let params = {
                deptId: this.deptId,
                bindFlag: 1
            };
            getLiftList(params).then(res => {
                if (res.code == 200) {
                    let list = res.data.list;
                    this.deviceList = this.initData(list);
                    if (this.deviceList.length == 0) {
                        this.deviceId = "";
                        this.deviceName = "";
                    } else {
                        this.deviceId = this.deviceList[0].liftId;
                        this.deviceName = this.deviceList[0].code;
                        this.getDeviceDetailFn();
                    }
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        //获取设备详情
        async getDeviceDetailFn() {
            let params;
            let getRealTimeData = null;
            let getDeviceInfo = null;
            //实时数据信息
            let realTimeData = {};
            //设备信息
            let deviceInfo = {};
            //报警信息
            let warnData = {};
            if (this.deviceType === "crane") {
                params = {
                    craneId: this.deviceId
                };
                getRealTimeData = getCraneDateLatest;
                getDeviceInfo = getCraneDetails;
            } else {
                params = {
                    liftId: this.deviceId
                };
                getRealTimeData = getLiftDateLatest;
                getDeviceInfo = getLiftDetails;
            }
            await getRealTimeData(params).then(res => {
                if (res.code == 200) {
                    if (this.deviceType === "crane") {
                        realTimeData = res.data || {};
                    } else {
                        if (res.data.list.length > 0) {
                            let list = res.data.list;
                            let left = list.filter(v => v.liftSide === 1);
                            let right = list.filter(v => v.liftSide === 2);
                            realTimeData = {
                                left: left.length > 0 ? { ...left[0] } : {},
                                right: right.length > 0 ? { ...right[0] } : {}
                            };
                        }
                    }
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
            await getDeviceInfo(params).then(res => {
                if (res.code == 200) {
                    deviceInfo = res.data;
                    deviceInfo["operatorStr"] = "";
                    if (deviceInfo.operatorList && deviceInfo.operatorList.length > 0) {
                        deviceInfo["operatorStr"] = deviceInfo.operatorList.map(v => v.name).join("/");
                    }
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
            let warnObj = {
                deptId: this.deptId,
                pageNum: 1,
                pageSize: 10
            };
            let warnParams1 = { state: 0, ...warnObj };
            let warnParams2 = { state: 1, ...warnObj };
            await this.$axios.all([getFseRecordList(warnParams1), getFseRecordList(warnParams2)]).then(
                this.$axios.spread((res1, res2) => {
                    warnData["num"] = res1.data.total + res2.data.total;
                })
            );
            let deviceDetail = {
                realTimeData,
                deviceInfo,
                warnData
            };
            this.deviceDetail = deviceDetail;
        },
        //数据处理
        initData(list) {
            let length = list.length;
            for (let i = 0; i < length; i++) {
                list[i].id = list[i].liftId || list[i].craneId;
            }
            return list;
        },
        //获取日期
        getData(index) {
            this.day = index;
            this.slider = 0;
            this.pause();
            this.getList();
        },
        //轨迹回放操作
        getMapFlag(type) {
            if (type == 0) {
                this.mapFlag = false;
            } else {
                this.mapFlag = true;
            }
            this.getMap(this.markList, this.mapFlag);
        },
        timestepToolTip(index) {
            this.time = index;
            this.times = formatSeconds(this.time);
            return this.times;
        },
        start() {
            this.playFlag = false;
            this.time1 = setInterval(() => {
                this.slider += this.step;
                this.getMarkList(this.slider);
            }, 1000);
        },
        pause() {
            this.playFlag = true;
            clearInterval(this.time1);
        },
        getSecond() {
            this.pause();
            let t = 100000;
            this.getMarkList(this.time, t);
        },
        addMarker(markList, t) {
            if (markList.length > 0) {
                markList.forEach((i, index) => {
                    let s = t ? t : 100000;
                    this.markers[index].moveTo([i.lng, i.lat], s);
                    if (i.workState == 0) {
                        this.markers[index].setLabel({
                            offset: new AMap.Pixel(-40, 10), //设置文本标注偏移量
                            content:
                                "<div class='in_fo in_fo0' >" +
                                i.machTypeName +
                                i.machCode +
                                "</div>", //设置文本标注内容
                            direction: "top" //设置文本标注方位
                        });
                    } else if (i.workState == 1) {
                        this.markers[index].setLabel({
                            offset: new AMap.Pixel(-40, 10), //设置文本标注偏移量
                            content:
                                "<div class='in_fo in_fo4' >" +
                                i.machTypeName +
                                i.machCode +
                                "</div>", //设置文本标注内容
                            direction: "top" //设置文本标注方位
                        });
                    } else if (i.workState == 2) {
                        this.markers[index].setLabel({
                            offset: new AMap.Pixel(-40, 10), //设置文本标注偏移量
                            content:
                                "<div class='in_fo in_fo2' >" +
                                i.machTypeName +
                                i.machCode +
                                "</div>", //设置文本标注内容
                            direction: "top" //设置文本标注方位
                        });
                    } else if (i.workState == 3) {
                        this.markers[index].setLabel({
                            offset: new AMap.Pixel(-40, 10), //设置文本标注偏移量
                            content:
                                "<div class='in_fo in_fo3' >" +
                                i.machTypeName +
                                i.machCode +
                                "</div>", //设置文本标注内容
                            direction: "top" //设置文本标注方位
                        });
                    }
                    this.markers[index].setMap(this.mapObj);
                });
            }
        },
        getMarkList(time, t) {
            this.markList = [];
            if (this.allGpsList.length > 0) {
                for (let i in this.allGpsList) {
                    for (let j in this.allGpsList[i].gpsList) {
                        this.allGpsList[i].gpsList[j]["times"] =
                            parseInt(this.allGpsList[i].gpsList[j].time.substring(11, 13) * 3600) +
                            parseInt(this.allGpsList[i].gpsList[j].time.substring(14, 16) * 60) +
                            parseInt(this.allGpsList[i].gpsList[j].time.substring(17, 19));
                    }
                }
                this.allGpsList.forEach(i => {
                    let obj = closest(i.gpsList, time);
                    let obj1 = {
                        machId: i.machId,
                        machCode: i.machCode,
                        machTypeName: i.machTypeName,
                        machTypeIcon: i.icon,
                        lng: obj.lng,
                        lat: obj.lat,
                        workState: obj.workState
                    };
                    this.markList.push(obj1);
                });
            }
            this.addMarker(this.markList);
        },
        //地图数据
        getMapList() {
            let params = {
                deptId: this.deptId,
                date: this.day
            };
            getMachAllGpsList(params).then(res => {
                if (res.code == 200) {
                    this.allGpsList = [];
                    res.data.list.forEach(i => {
                        if (i.gpsList.length > 0) {
                            this.allGpsList.push(i);
                        }
                    });
                    this.markList = [];
                    if (this.allGpsList.length > 0) {
                        this.allGpsList.forEach(i => {
                            let obj = {
                                machId: i.machId,
                                machCode: i.machCode,
                                machTypeName: i.machTypeName,
                                machTypeIcon: i.icon,
                                lng: i.gpsList[i.gpsList.length - 1].lng,
                                lat: i.gpsList[i.gpsList.length - 1].lat,
                                workState: i.gpsList[i.gpsList.length - 1].workState
                            };
                            this.markList.push(obj);
                        });
                    } else {
                        this.markList = [];
                    }
                    this.getMap(this.markList, this.mapFlag);
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        getAllList() {
            let params = {
                deptId: this.deptId,
                machTypeId: "",
                machCode: "",
                workState: ""
            };
            getMachMapList_V1(params).then(res => {
                if (res.code == 200) {
                    this.markList = [];
                    if (res.data.mapList.length > 0) {
                        res.data.mapList.forEach(i => {
                            let obj = {
                                machId: i.id,
                                machCode: i.machCode,
                                machTypeName: i.machTypeName,
                                machTypeIcon: i.icon,
                                lng: i.lng,
                                lat: i.lat,
                                workState: i.workState,
                                time: i.time
                            };
                            this.markList.push(obj);
                        });
                    } else {
                        this.markList = [];
                    }
                    this.getMap(this.markList, this.mapFlag);
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        //设备数据
        getDeviceData() {
            this.deviceDataList = [];
            this.dateList = [];
            let params = {
                deptId: this.deptId,
                startDate: formatDate(this.deviceDataTime[0]),
                endDate: formatDate(this.deviceDataTime[1])
            };
            getBoardDevicedata(params).then(res => {
                if (res.code == 200) {
                    this.deviceDataAllList = res.data.weekDataList;
                    if (this.deviceDataAllList.length > 0) {
                        this.deviceDataAllList.forEach(v => {
                            this.dateList.unshift(
                                v.date.substring(5, v.date.length)
                            );
                            if (this.deviceDataTypeSwitch == 1) {
                                this.deviceDataList.unshift(v.efficExp);
                                this.deviceDataName = "工作效率";
                            } else if (this.deviceDataTypeSwitch == 2) {
                                this.deviceDataList.unshift(v.oilWear);
                                this.deviceDataName = "油耗量";
                            } else if (this.deviceDataTypeSwitch == 3) {
                                this.deviceDataList.unshift(
                                    v.operatingRate
                                );
                                this.deviceDataName = "开工率";
                            } else if (this.deviceDataTypeSwitch == 4) {
                                this.deviceDataList.unshift(v.workTimes);
                                this.deviceDataName = "工作时长";
                            }
                        });
                    }
                    this.drawDeviceData();
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        getMap(markers, type) {
            this.markers = [];
            let centerArr = [this.lng || 114.29484, this.lat || 30.592335];
            if (!type) {
                this.mapObj = new AMap.Map("map", {
                    resizeEnable: true,
                    center: centerArr,
                    zoom: 13
                });
            } else {
                this.mapObj = new AMap.Map("map", {
                    resizeEnable: true,
                    center: centerArr,
                    zoom: 13,
                    mapStyle: "amap://styles/whitesmoke"
                });
            }
            if (markers.length > 0) {
                var _that = this;
                markers.forEach(i => {
                    var marker = new AMap.Marker({
                        map: _that.mapObj,
                        icon: new AMap.Icon({
                            image: i.machTypeIcon,
                            size: new AMap.Size(128, 128), //图标大小
                            imageSize: new AMap.Size(48, 48)
                        }),
                        position: [i.lng, i.lat],
                        offset: new AMap.Pixel(-13, -30)
                    });
                    _that.markers.push(marker);
                    if (i.workState == 0) {
                        marker.setLabel({
                            offset: new AMap.Pixel(-40, 10), //设置文本标注偏移量
                            content:
                                "<div class='in_fo in_fo0' >" +
                                i.machTypeName +
                                "-" +
                                i.machCode +
                                "</div>", //设置文本标注内容
                            direction: "top" //设置文本标注方位
                        });
                    } else if (i.workState == 1 || i.workState == 4) {
                        marker.setLabel({
                            offset: new AMap.Pixel(-40, 10), //设置文本标注偏移量
                            content:
                                "<div class='in_fo in_fo4' >" +
                                i.machTypeName +
                                "-" +
                                i.machCode +
                                "</div>", //设置文本标注内容
                            direction: "top" //设置文本标注方位
                        });
                    } else if (i.workState == 2) {
                        marker.setLabel({
                            offset: new AMap.Pixel(-40, 10), //设置文本标注偏移量
                            content:
                                "<div class='in_fo in_fo2' >" +
                                i.machTypeName +
                                "-" +
                                i.machCode +
                                "</div>", //设置文本标注内容
                            direction: "top" //设置文本标注方位
                        });
                    } else if (i.workState == 3) {
                        marker.setLabel({
                            offset: new AMap.Pixel(-40, 10), //设置文本标注偏移量
                            content:
                                "<div class='in_fo in_fo3' >" +
                                i.machTypeName +
                                "-" +
                                i.machCode +
                                "</div>", //设置文本标注内容
                            direction: "top" //设置文本标注方位
                        });
                    }
                });
            }
            var mouseTool = new AMap.MouseTool(this.mapObj);
            this.mapObj.setFitView();
        },
        //获取设备数据-实时状态
        getDeviceList() {
            this.enterDeviceList = [];
            this.realStatusList = [];
            this.realStatusMsgList = [];
            let params = {
                deptId: this.deptId
            };
            getBoardDevicesdatalist(params)
                .then(res => {
                    if (res.code == 200) {
                        this.boardMachNumDTO = res.data.boardMachNumDTO;
                        this.warnNum = res.data.machWarnCountDTO.warnNum;
                        this.enterDeviceNum = this.boardMachNumDTO.num || 0;
                        this.realStatusNum = this.enterDeviceNum;
                        let realTimeStatusList = res.data.machList;
                        let machWarnCountDTO = res.data.machWarnCountDTO || {};

                        //预警统计
                        for (const key in machWarnCountDTO) {
                            for (const warnKey in this.warnList) {
                                if (this.warnList[warnKey].code === key) {
                                    this.warnList[warnKey].num = machWarnCountDTO[key];
                                }
                            }
                        }
                        this.warnList.sort((a, b) => {
                            return a.num - b.num;
                        });

                        //实时状态
                        realTimeStatusList.forEach(i => {
                            if (i.time) {
                                i.time = i.time.substring(5, i.time.length);
                            } else {
                                i.time = "";
                            }
                            if (i.duration) {
                                i.duration = timeStamp(i.duration);
                            } else {
                                i.duration = "";
                            }
                        });
                        for (let i in realTimeStatusList) {
                            let str = "";
                            for (let j in realTimeStatusList[i].operEmpList) {
                                //默认显示第一个操作手信息
                                str += realTimeStatusList[i].operEmpList[j].operEmpName + ",";
                                realTimeStatusList[i]["operEmpName"] = str.substring(0, str.length - 1);
                            }
                        }
                        this.realTimeStatusList = realTimeStatusList;

                        //实时状态
                        this.realStatusList = [
                            {
                                value: this.boardMachNumDTO.workNum,
                                rate: this.realStatusNum === 0 ? "0%" : toPercent(this.boardMachNumDTO.workNum / this.realStatusNum),
                                name: "工作",
                                itemStyle: {
                                    normal: {
                                        color: this.colorList[0]
                                    }
                                }
                            },
                            {
                                rate: this.realStatusNum === 0 ? "0%" : toPercent(this.boardMachNumDTO.idleNum / this.realStatusNum),
                                value: this.boardMachNumDTO.idleNum,
                                name: "怠机",
                                itemStyle: {
                                    normal: {
                                        color: this.colorList[1]
                                    }
                                }
                            },
                            {
                                rate: this.realStatusNum === 0 ? "0%" : toPercent(this.boardMachNumDTO.stopNum / this.realStatusNum),
                                value: this.boardMachNumDTO.stopNum,
                                name: "停机",
                                itemStyle: {
                                    normal: {
                                        color: this.colorList[2]
                                    }
                                }
                            },
                            {
                                rate: this.realStatusNum === 0 ? "0%" : toPercent(this.boardMachNumDTO.offlineNum / this.realStatusNum),
                                value: this.boardMachNumDTO.offlineNum,
                                name: "离线",
                                itemStyle: {
                                    normal: {
                                        color: this.colorList[3]
                                    }
                                }
                            }
                        ];
                        this.drawRealTimeStatus();

                        //在场设备
                        let appMachTypeNumList =
                            this.boardMachNumDTO.appMachTypeNumList || [];
                        if (appMachTypeNumList.length > 0) {
                            for (let i = 0; i < appMachTypeNumList.length; i++) {
                                let e = appMachTypeNumList[i];
                                let obj = {
                                    value: e.num,
                                    name: e.machTypeName,
                                    rate: this.enterDeviceNum == 0 ? "0%" : toPercent(e.num / this.enterDeviceNum),
                                    itemStyle: {
                                        normal: {
                                            color: this.colorList[i]
                                        }
                                    }
                                };
                                this.enterDeviceList.push(obj);
                            }
                            this.$refs.enterDeviceList.reset();
                        }
                        if (this.enterDeviceList.length == 0) {
                            this.enterDeviceList = [
                                {
                                    value: 0,
                                    name: "暂无数据",
                                    itemStyle: {
                                        normal: {
                                            color: this.colorList[0]
                                        }
                                    }
                                }
                            ];
                        }
                        this.drawEnterDevice();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        }
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        },
        defaultOption() {
            return {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            };
        }
    },
    mounted() {
        this.lat = this.$store.state.porjectObject.lat == undefined ? 30.592335 : this.$store.state.porjectObject.lat;
        this.lng = this.$store.state.porjectObject.lng == undefined ? 114.29484 : this.$store.state.porjectObject.lng;
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getDeviceList();
        this.getDeviceData();
        this.getAllList();
        this.getCraneListFn();
    }
};
</script>

<style scoped lang="scss">
@function pxToRem($val) {
    @return $val/100 + rem;
}
@font-face {
    font-family: "led regular";
    src: url("../../assets/font/ds-digib-webfont.woff") format("woff");
}
/deep/#subPage {
    width: 100%;
    height: 100%;
    min-width: pxToRem(1440);
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    pointer-events: auto !important;
    .left,
    .right {
        width: pxToRem(440);
        min-width: pxToRem(440);
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-flow: column nowrap;
        .item {
            width: 100%;
            height: pxToRem(320);
            background-image: url("../../assets/images/ags/index/left_frist_panel.png");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 120%;
            padding: pxToRem(5) 0;
            box-sizing: border-box;
            margin-bottom: pxToRem(20);
        }
        .left_one {
            display: flex;
            flex-flow: column nowrap;
            .left_one_top {
                display: flex;
                justify-content: flex-start;
                margin-left: pxToRem(80);
                margin-top: pxToRem(10);
                .left_one_top_icon {
                    img {
                        width: pxToRem(28);
                        height: pxToRem(28);
                    }
                }
                .left_one_top_title {
                    width: pxToRem(220);
                    height: pxToRem(22);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(25);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .left_one_bottom {
                display: flex;
                justify-content: space-between;
                width: pxToRem(340);
                height: pxToRem(160);
                margin: pxToRem(20) pxToRem(20) 0 pxToRem(70);
                .left_one_bottom_chart {
                    display: flex;
                    flex-flow: column;
                    background-image: url("../../assets/images/ags/equip/ring.png");
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    width: pxToRem(130);
                    height: pxToRem(130);
                    #present_device {
                        width: pxToRem(130);
                        height: pxToRem(130);
                    }
                    .left_title {
                        text-align: center;
                        font-size: pxToRem(12);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #a8dfff;
                    }
                }
                .left_one_bottom_list {
                    flex: 1;
                    max-height: pxToRem(120);
                    overflow: hidden;
                    margin-left: pxToRem(25);
                    ul {
                        width: 100%;
                        li {
                            width: 100%;
                            height: pxToRem(30);
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            font-size: pxToRem(12);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #d8f0fe;
                            // margin: auto;
                            em {
                                width: pxToRem(7);
                                height: pxToRem(7);
                                margin-right: pxToRem(10);
                                border-radius: 50%;
                            }
                            span {
                                margin-right: pxToRem(5);
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
                    }
                }
            }
        }
        .left_two {
            display: flex;
            flex-flow: column nowrap;
            .left_two_top {
                display: flex;
                justify-content: flex-start;
                margin-left: pxToRem(80);
                margin-top: pxToRem(10);
                .left_two_top_icon {
                    img {
                        width: pxToRem(28);
                        height: pxToRem(24);
                    }
                }
                .left_two_top_title {
                    width: pxToRem(220);
                    height: pxToRem(22);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(22);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .left_two_bottom {
                display: flex;
                flex-flow: column nowrap;
                .tabs {
                    width: 100%;
                    padding: 0 pxToRem(25);
                    box-sizing: border-box;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: pxToRem(10);
                    .tab {
                        width: pxToRem(53);
                        height: pxToRem(26);
                        background-image: url("../../assets/images/ags/equip/tabs.png");
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        font-size: pxToRem(12);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #6bc9ff;
                        text-align: center;
                        line-height: pxToRem(26);
                        margin-right: pxToRem(7);
                        cursor: pointer;
                        &:hover {
                            color: #ffffff;
                            text-shadow: pxToRem(0) pxToRem(2) pxToRem(10)
                                #ffffff;
                        }
                        &.active {
                            color: #ffffff;
                            text-shadow: pxToRem(0) pxToRem(2) pxToRem(10)
                                #ffffff;
                        }
                    }
                }
                .echarts {
                    width: auto;
                    height: auto;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: pxToRem(10);
                    margin-left: pxToRem(65);
                    .echartsBox {
                        position: relative;
                    }
                    #real-time-status {
                        width: pxToRem(120);
                        height: pxToRem(120);
                    }
                    .echartsBox_list {
                        flex: 1;
                        max-height: pxToRem(120);
                        margin-left: pxToRem(20);
                        overflow: hidden;
                        ul {
                            width: 100%;
                            li {
                                width: 100%;
                                height: pxToRem(30);
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                font-size: pxToRem(12);
                                font-family: Microsoft YaHei-Regular,
                                    Microsoft YaHei;
                                font-weight: 400;
                                color: #d8f0fe;
                                // margin: auto;
                                em {
                                    width: pxToRem(7);
                                    height: pxToRem(7);
                                    margin-right: pxToRem(10);
                                    border-radius: 50%;
                                }
                                span {
                                    margin-right: pxToRem(5);
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
                            }
                        }
                    }
                }
            }
        }
        .left_three {
            display: flex;
            flex-flow: column nowrap;
            .left_three_top {
                display: flex;
                justify-content: flex-start;
                margin-left: pxToRem(80);
                margin-top: pxToRem(10);
                .left_three_top_icon {
                    img {
                        width: pxToRem(24);
                        height: pxToRem(24);
                    }
                }
                .left_three_top_title {
                    width: pxToRem(185);
                    height: pxToRem(24);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(24);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
                .left_three_top_count {
                    width: pxToRem(100);
                    margin-top: pxToRem(3);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    // margin-left: pxToRem(10);
                    span:first-of-type,
                    span:last-of-type {
                        font-size: pxToRem(12);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #d8f0fe;
                    }
                    span:nth-of-type(2) {
                        display: inline-block;
                        margin-left: pxToRem(10);
                        font-size: pxToRem(16);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #00f0ff;
                    }
                }
            }
            .left_three_bottom {
                position: relative;
                width: 76%;
                height: 70%;
                margin: auto;
                overflow: hidden;
                background-color: #06243f;
                left: pxToRem(10);
                ul {
                    position: relative;
                    width: 100%;
                    list-style: none;
                    height: auto;
                    list-style: none;

                    &::-webkit-scrollbar {
                        width: pxToRem(8);
                    }
                    li {
                        width: 100%;
                        height: pxToRem(30);
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        color: #bcf0fe;
                        font-size: pxToRem(14);
                        border-bottom: 1px solid #304252;
                        padding: 0 pxToRem(28);
                        box-sizing: border-box;
                        em {
                            width: pxToRem(7);
                            height: pxToRem(7);
                            border-radius: 50%;
                            margin-left: pxToRem(-10);
                            margin-right: pxToRem(10);
                        }
                        .name {
                            flex: 1;
                            width: pxToRem(120);
                            margin-right: pxToRem(20);
                            font-size: pxToRem(12);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #d8f0fe;
                        }
                        .num {
                            flex: 1;
                            text-align: right;
                            font-size: pxToRem(12);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #8592a0;
                        }
                    }
                }
            }
        }
    }
    .right .item {
        background-image: url("../../assets/images/ags/equip/right_panel.png") !important;
        background-size: 100% 113% !important;
    }
    .right .item:first-of-type {
        height: 38.5%;
    }
    .right .item:last-of-type {
        margin-bottom: 0;
        width: pxToRem(430);
        height: 57%;
    }
    .left .item:last-of-type {
        height: 30%;
    }
    .center {
        width: pxToRem(950);
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
        .center-top {
            position: relative;
            width: 100%;
            height: 62%;
            border: pxToRem(2) solid #6bc9ff;
            box-sizing: border-box;
            margin-bottom: pxToRem(5);
            .tag-list {
                position: absolute;
                left: pxToRem(10);
                top: pxToRem(10);
                display: flex;
                justify-content: flex-start;
                align-items: center;
                z-index: 10;
                .tag {
                    width: pxToRem(73);
                    height: pxToRem(25);
                    background-image: url("../../assets/images/ags/equip/tag_icon.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    font-size: pxToRem(14);
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #a8dfff;
                    margin-right: pxToRem(8);
                    text-align: center;
                    line-height: pxToRem(25);
                    cursor: pointer;
                    &.active {
                        background-image: url("../../assets/images/ags/equip/tag_icon_active.png");
                        color: #062a3e;
                        text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.26);
                    }
                }
            }
            .img {
                position: relative;
                width: 100%;
                height: 100%;
                border: pxToRem(1) solid #4ae1ff;
                box-sizing: border-box;
                overflow: hidden;
                #map {
                    width: 100%;
                    height: 100%;
                }
            }
            .time {
                width: 100%;
                height: pxToRem(75);
                background: rgba(5, 61, 139, 1);
                opacity: 0.24;
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
            }
            .list {
                width: 100%;
                height: pxToRem(75);
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 1;
                display: flex;
                justify-content: flex-start;
                .slider {
                    width: 90%;
                    .tip {
                        width: 95%;
                        margin: 0 auto;
                        div {
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                        }
                        .p1 {
                            span {
                                width: pxToRem(2);
                                height: pxToRem(3);
                                background: rgba(254, 254, 253, 1);
                            }
                        }
                        .p2 {
                            height: pxToRem(3);
                            border-radius: 1px;
                            background: rgba(254, 254, 253, 1);
                        }
                        .p3 {
                            span {
                                color: rgba(254, 254, 253, 1);
                                width: pxToRem(20);
                            }
                        }
                    }
                }
                .play {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: 1%;
                    cursor: pointer;
                    img {
                        width: pxToRem(40);
                        height: pxToRem(40);
                    }
                }
            }
            .imgBox {
                position: absolute;
                top: pxToRem(20);
                left: pxToRem(10);
                width: pxToRem(150);
                height: pxToRem(60);
                display: flex;
                justify-content: space-between;
                align-items: center;
                img {
                    width: pxToRem(70);
                    height: pxToRem(42);
                    cursor: pointer;
                }
            }
            .imgBox1 {
                position: absolute;
                top: pxToRem(20);
                right: pxToRem(10);
                width: pxToRem(150);
                height: pxToRem(60);
                display: flex;
                justify-content: space-between;
                align-items: center;
                img {
                    width: pxToRem(70);
                    height: pxToRem(42);
                    cursor: pointer;
                }
            }
        }
        .bottom {
            width: 100%;
            height: 35%;
            margin-top: pxToRem(20);
            background-image: url("../../assets/images/ags/index/bottom_panel.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            flex-flow: column nowrap;
            .bottom_top {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin: pxToRem(26);
                .bottom_top_icon {
                    img {
                        width: pxToRem(42);
                        height: pxToRem(15);
                    }
                }
                .bottom_top_title {
                    width: pxToRem(88);
                    height: pxToRem(22);
                    font-size: pxToRem(16);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(17);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .bottom_table {
                width: 88%;
                margin: pxToRem(-30) 0 0 pxToRem(60);
                height: pxToRem(250);
                overflow: hidden;
                .t-header {
                    width: 100%;
                    height: pxToRem(35);
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    overflow: hidden;
                    .td {
                        flex: 1;
                        text-align: center;
                        line-height: pxToRem(35);
                        margin-bottom: pxToRem(1);
                        font-size: pxToRem(12);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #00f0ff;
                    }
                }
                .t-body {
                    width: 100%;
                    height: calc(100% - 0.35rem);
                    overflow: hidden;
                    .tr {
                        height: pxToRem(30);
                        width: 100%;
                        display: flex;
                        margin-bottom: pxToRem(1);
                        &:nth-child(2n-1) {
                            background: #0c1b2b;
                        }
                        .td {
                            flex: 1;
                            text-align: center;
                            line-height: pxToRem(30);
                            font-size: pxToRem(14);
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #b5eeff;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
            }
        }
    }
    .right_one {
        display: flex;
        flex-flow: column nowrap;
        .right_one_top {
            display: flex;
            justify-content: flex-start;
            margin-left: pxToRem(60);
            margin-top: pxToRem(10);
            .right_one_top_icon {
                img {
                    width: pxToRem(27);
                    height: pxToRem(24);
                }
            }
            .right_one_top_title {
                width: pxToRem(220);
                height: pxToRem(22);
                font-size: pxToRem(22);
                font-family: SourceHanSansCN-Medium;
                line-height: pxToRem(18);
                color: #a8dfff;
                margin-left: pxToRem(10);
            }
        }
        .right_one_bottom {
            display: flex;
            flex-flow: column nowrap;
            height: 85%;
            .tabs {
                width: 100%;
                padding: 0 pxToRem(25);
                box-sizing: border-box;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: pxToRem(-5);
                margin-top: pxToRem(10);
                .tab {
                    width: pxToRem(70);
                    height: pxToRem(26);
                    background-image: url("../../assets/images/ags/equip/tabs.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    font-size: pxToRem(12);
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #6bc9ff;
                    text-align: center;
                    line-height: pxToRem(26);
                    margin-right: pxToRem(7);
                    cursor: pointer;
                    &:hover {
                        color: #ffffff;
                        text-shadow: pxToRem(0) pxToRem(2) pxToRem(10) #ffffff;
                    }
                    &.active {
                        color: #ffffff;
                        text-shadow: pxToRem(0) pxToRem(2) pxToRem(10) #ffffff;
                    }
                }
            }
            .tabs_right {
                display: flex;
                justify-content: flex-end;
                margin: pxToRem(25) pxToRem(60) pxToRem(20) 0;
                font-size: pxToRem(12);
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                color: #6bc9ff;
                .tabs_right1 {
                    width: pxToRem(60);
                    height: pxToRem(26);
                    text-align: center;
                    line-height: pxToRem(26);
                    background-image: url("../../assets/images/ags/equip/left_tab.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    margin-right: pxToRem(-2);
                    cursor: pointer;
                    &.active {
                        cursor: pointer;
                        background-image: url("../../assets/images/ags/equip/left_tab_hover.png");
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        color: #062a3e;
                    }
                }
                .tabs_right2 {
                    width: pxToRem(60);
                    height: pxToRem(26);
                    text-align: center;
                    line-height: pxToRem(26);
                    background-image: url("../../assets/images/ags/equip/right_tab.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    cursor: pointer;
                    &.active {
                        cursor: pointer;
                        background-image: url("../../assets/images/ags/equip/right_tab_hover.png");
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        color: #062a3e;
                    }
                }
            }
            .echarts {
                display: flex;
                flex-flow: column nowrap;
                height: 100%;
                width: 80%;
                margin: 0 0 0 pxToRem(40);
                margin-top: pxToRem(-30);
                #device_data {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .right_two {
        display: flex;
        flex-flow: column nowrap;
        // height: 100vh;
        .right_two_top {
            display: flex;
            justify-content: flex-start;
            margin-left: pxToRem(60);
            margin-top: pxToRem(10);
            .right_two_top_icon {
                img {
                    width: pxToRem(28);
                    height: pxToRem(22);
                }
            }
            .right_two_top_title {
                width: pxToRem(220);
                height: pxToRem(22);
                font-size: pxToRem(22);
                font-family: SourceHanSansCN-Medium;
                line-height: pxToRem(18);
                color: #a8dfff;
                margin-left: pxToRem(10);
            }
        }
        .right_two_bottom {
            display: flex;
            flex-flow: column nowrap;
            height: 100vh;
            flex: 1;
            .right_two_tab {
                display: flex;
                justify-content: flex-start;
                margin: pxToRem(5) 0 pxToRem(20) pxToRem(50);
                font-size: pxToRem(12);
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                color: #6bc9ff;
                height: 10%;
                .name {
                    width: pxToRem(80);
                    height: pxToRem(26);
                    text-align: center;
                    line-height: pxToRem(26);
                    background-image: url("../../assets/images/ags/equip/tabs.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    .text {
                        font-size: pxToRem(12);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #6bc9ff;
                    }
                }
                .type {
                    margin-left: pxToRem(90);
                    width: pxToRem(100);
                    height: pxToRem(26);
                    text-align: center;
                    line-height: pxToRem(26);
                    background-image: url("../../assets/images/ags/equip/tabs.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    .text {
                        font-size: pxToRem(12);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #6bc9ff;
                    }
                }
            }
            .right_two_center {
                display: flex;
                justify-content: flex-start;
                margin: pxToRem(-10) 0 0 pxToRem(50);
                height: 40%;
                img {
                    width: pxToRem(128);
                    height: pxToRem(136);
                }
                .right_list {
                    line-height: pxToRem(21);
                    font-size: pxToRem(12);
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #d8f0fe;
                    width: pxToRem(180);
                    margin-left: pxToRem(28);
                    .right_list_one {
                        width: 100%;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
            .right_two_datail {
                width: pxToRem(320);
                height: 45%;
                margin: pxToRem(-5) 0 0 pxToRem(47);
                background-image: url("../../assets/images/ags/index/right_one_panel.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                .right_two_panel {
                    display: flex;
                    flex: 1;
                    flex-flow: column nowrap;
                    width: pxToRem(320);
                    height: 95%;
                    margin: pxToRem(5) pxToRem(2) pxToRem(2) pxToRem(5);
                    .right_two_item {
                        flex: 1;
                        font-size: pxToRem(12);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #d8f0fe;
                        display: flex;
                        justify-content: space-around;
                        height: pxToRem(30);
                        width: pxToRem(310);
                        font-size: pxToRem(12);
                        background-color: #102737;
                        margin-bottom: pxToRem(2);
                        .right_two_title {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: pxToRem(150);
                            color: #c4ddeb;
                            margin-left: pxToRem(25);
                        }
                        .right_two_date {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: pxToRem(150);
                            color: #c4ddeb;
                        }
                        img {
                            margin-right: pxToRem(5);
                            height: pxToRem(20);
                            width: pxToRem(20);
                        }
                        span {
                            display: block;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            width: pxToRem(80);
                        }
                    }
                }
            }
        }
    }
}
.canvas-center-box {
    position: absolute;
    width: pxToRem(50);
    height: pxToRem(50);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .num {
        font-size: pxToRem(28);
        font-family: "led regular";
        font-weight: bold;
        color: #ffffff;
        text-align: center;
        margin-top: pxToRem(-10);
    }
    .text {
        margin-top: pxToRem(-10);
        font-size: pxToRem(9);
        transform: scale(0.75);
        white-space: nowrap;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
    }
}
</style>
